<template>
    <el-card class="exam-list">

      <el-form :inline="true" :model="searchForm">
        <el-form-item label="试卷状态">
          <el-select v-model="searchForm.state" placeholder="请选择">
            <el-option
              v-for="(item, index) in options"
              :key="index"
              :label="item"
              :value="item">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="search">查询</el-button>
        </el-form-item>
      </el-form>

      <el-table
        :data="tableData"
        stripe
        style="width: 100%">
        <el-table-column
          prop="id"
          label="id"
          >
        </el-table-column>
        <el-table-column
          prop="name"
          label="考试名称">
        </el-table-column>
        <el-table-column
          prop="courseName"
          label="课程名称">
        </el-table-column>
        <el-table-column
          prop="startTime"
          label="开始时间"
          width="180"
         >
        </el-table-column>
        <el-table-column
          prop="endTime"
          width="180"
          label="结束时间">
        </el-table-column>
        <el-table-column
          prop="totalTime"
          label="总时长">
          <template slot-scope="scope">
            {{Math.floor(scope.row.duration / 3600)}}时{{Math.floor((scope.row.duration % 3600) / 60)}}分{{(scope.row.duration % 3600) % 60}}秒
          </template>
        </el-table-column>
        <el-table-column
          prop="totalTime"
          label="状态">
          <template slot-scope="scope">
            <el-tag :type="scope.row.status == '未开始' ? '' :
             (scope.row.status == '进行中' ? 'primary' : 'info')">{{scope.row.status}}</el-tag>
          </template>
        </el-table-column>
        <el-table-column
          label="操作">
          <template slot-scope="scope">
            <el-tooltip class="item" effect="light" content="复制邀请码" placement="top-start">
            <el-button
              type="primary"
              icon="el-icon-document-copy"
              circle size="mini"
              v-clipboard:copy="scope.row.invitationCode"
              v-clipboard:success="copy"
              ></el-button>
            </el-tooltip>
            <el-button type="danger" icon="el-icon-delete" circle size="mini" @click="del(scope.row.id)"></el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
</template>

<script>
  import { mapGetters } from 'vuex'

  export default {
    data() {
      return {
        searchForm: {
          state: null,
        },
        options:['未开始','进行中', '已结束'],
        tableData:[],
        exams: null,
      }
    },
    created () {
      this.getExams();
    },
    computed: {
      ...mapGetters([
        'userInfo',
      ]),
    },

    methods: {
      search() {
        let index = 0;
        this.tableData = [];
        this.exams.filter((item) => {
          if (item.status == this.searchForm.state) {
            this.tableData[index++] = item;
          }
        })
      },
      // 复制验证码
      copy() {
        this.$message.success('复制成功');
      },
      async del(id) {
        const { data: res } = await this.$http.delete('exam', {
          params: {
            id,
          }
        });
        if (res.code == 200) {
          return this.$message.error('删除失败')
        }
        this.getExams();
        this.$message.success('删除成功');
      },
      async getExams() {
        const { data: res } = await this.$http.get('exams', {
          params: {
            ownerNickname: this.userInfo.username,
          }
        });
        if (res.code == 200) {
          return
        }
        this.exams = res.data.exams;
        this.tableData = this.exams;
      },
    }

  }
</script>

<style lang="scss" scoped>
.exam-list {
  width: 1200px;
  padding-top: 20px;
}
</style>
